<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>layout</title>
    <link rel="stylesheet"  href="../reset.css"  />

</head>
<body>
    <style type="text/css">
        /**collr***/
        .col { float: left; }
        .columnlr .colmax { float: right; }

        .colwrap{ margin-bottom: 10px; width:1400px;}
        .col{float: left;margin-right: 10px;  height: 200px; background: #cccc00; }
        .colsmin{width:50px; }
        .colmin{width: 130px;  background: #cccc00;}
        .colmid{width: 230px;  background: #cdd5da; }
        .colmax{width: 320px;  background: #4C5D5F;}
        .colxmax{width:450px; }
    </style>
    <div class="colwrap clearfix">
        <div class="col colsmin"></div>
        <div class="col colmin"></div>
        <div class="col colmid"></div>
        <div class="col colmax"></div>
        <div class="col colxmax "></div>
    </div>

    <style type="text/css">
         .columnlr .colmax{float: right;}
    </style>
    <!--divlr spanlr-->
    
    <div class="colwrap columnlr clearfix">
        <div class="col colmin"></div>
        <div class="col colmax"></div>
    </div>
    <style type="text/css">
        .columnr .col{float: right;}
    </style>
    <div class="colwrap  clearfix">
        
        <div class="col colmax"></div>
        <div class="col colmin r"></div>
    </div>

</body>
</html>